<template>
    <div>
        <van-row justify="center">
            <van-col span="24" justify="center">
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field v-model="phoneNumber" name="user" label="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填写手机号' }]">
                            <template #button>
                                <van-button :disabled="isDisabled" size="small" type="primary" @click="sendCaptcha()">{{sendMsg}}</van-button>
                            </template>
                        </van-field>
                        <van-field v-model="password"  name="captcha" label="验证码" placeholder="验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            登录
                        </van-button>
                    </div>
                </van-form>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import { showToast,showFailToast,showSuccessToast,showLoadingToast, } from 'vant';
    import { toRefs, reactive, ref, unref } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex';    
    import { captchaApi,verifyApi,loginApi } from '../util/request.js'
    // import { Notify } from 'vant';

    export default ({
        name: 'LoginPage',
        // components: {
        //     [Notify.Component.name]: Notify.Component,
        // },
        setup() {
            const router = useRouter()
            const store = useStore()
            const password = ref('');
            const phoneNumber = ref('');
            //发送验证码
            const sendCaptcha = () => {
                let phoneReg = /^1[3-9]\d{9}$/;
                if (!phoneReg.test(unref(phoneNumber))) {
                    showFailToast({
                        message:'手机号码不规范',
                        duration:2000,
                        position:'top'
                    })
                    return;
                }
                console.log(unref(phoneNumber));
                captchaApi(phoneNumber).then((result) => {
                    data.isDisabled = true
                    let time = 60
                    data.sendMsg = time + '秒'
                    let timer = setInterval(() => {
                        --time
                        if (time == 0) {
                            data.isDisabled = false
                            data.sendMsg = '重新发送'
                            clearInterval(timer)
                        } else {
                            data.sendMsg = time + '秒'
                        }
                    }, 1000);
                    console.log('成功发送验证码', result);
                    showSuccessToast({
                        message:'验证码发送成功',
                        duration:2000
                    })
                }).catch((err) => {
                    console.log('error', err);
                    showFailToast({
                        message:'发送失败,网络异常',
                        duration:2000
                    })
                });
            }
            //登录
            const onSubmit = async (values) => {
                //验证验证码
                if(! password.value){
                    showFailToast({
                        message:'验证码不能为空',
                        duration:2000
                    })
                    return
                }
                let res = await verifyApi(values)
                console.log('验证验证码', res);
                if(res.data.code != 200){
                    showFailToast({
                        message:'登陆失败',
                        duration:2000
                    })
                    return
                } else {
                    let info = await loginApi(values)
                    console.log('登陆成功',info);
                    showSuccessToast({
                        message:'登陆成功',
                        duration:1000
                    })
                    // router.replace({
                    //     path:'/'
                    // })
                }
            };

            const data = reactive({
                isDisabled: false,
                sendMsg: '发送验证码'
            })


            return {
                ...toRefs(data),
                onSubmit,
                password,
                phoneNumber,
                sendCaptcha,
                router,
                store,
            }
        }

    })
</script>

<style>

</style>